<template>
  <el-dialog :fullscreen="isMaximized" width="64%" top="5vh" draggable :close-on-press-escape=false
    :close-on-click-modal=false v-model="show" @before-close="close">
    <!-- 自定义头部 -->
    <template #header="{ }">
      <div class="custom-header">
        <!-- 使用 :title 动态标题 -->
        <div class="dialog-header">历史记录</div>
        <div class="header-buttons">
          <!-- 最大化/还原按钮 -->
          <el-button class="my-button" type="text" @click="toggleMaximize">
            <el-icon>
              <component :is="isMaximized ? 'Minus' : 'FullScreen'" />
            </el-icon>
          </el-button>
          <!-- 移除关闭按钮 -->
        </div>
      </div>
    </template>
    <el-form label-width="120px" :model="resForm" ref="recordForm">
      <el-form-item label="标题:">
        <el-input type="textarea" :rows="titleRows" v-model="resForm.ChatTitle"></el-input>
      </el-form-item>
      <el-form-item label="原文:">
        <el-input type="textarea" :rows="contentRows" v-model="resForm.Question"></el-input>
      </el-form-item>
      <el-form-item label="翻译:">
        <el-input type="textarea" :rows="transformRows" v-model="resForm.Answer"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" @click="close">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    historyDialog: {
      type: Boolean,
      default: () => false
    },
    resForm: Object,
  },
  watch: {
    historyDialog(value) {
      this.show = value
    },
  },
  computed: {
    // 动态设置对话框样式（高度、边距等）
    dialogStyle() {
      return this.isMaximized
        ? { height: "100vh", width: "100vw", margin: 0, top: 0, left: 0 } // 最大化时占满视口
        : { height: "auto", margin: "auto" }; // 默认样式
    }
  },
  data() {
    return {
      recordForm: {},
      show: false,
      isMaximized: false, // 控制是否最大化
      titleRows: 3,
      contentRows: 10,
      transformRows: 10,
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    // 切换最大化/还原状态
    toggleMaximize() {
      this.isMaximized = !this.isMaximized;
      if (this.isMaximized) {
        this.resetPosition(); // 最大化时重置内部组件高度
        // 获取 el-dialog__header 和 el-dialog__footer 的高度
        // const header = document.querySelector('.el-dialog__header');
        // const footer = document.querySelector('.el-dialog__footer');
        // if (header && footer) {
        // console.log("Header 高度:", header.offsetHeight, "px");
        // console.log("Footer 高度:", footer.offsetHeight, "px");
        // } else {
        // console.warn("未找到相应的元素");
        // }
        // var viewportHeight = window.innerHeight;
        // var bodyHeight;
        // console.log("当前视口高度:", viewportHeight);

        // bodyHeight = viewportHeight - header.offsetHeight - footer.offsetHeight;
        // console.log("7777777",bodyHeight);


      }
      else {
        this.titleRows = 3,
          this.contentRows = 10,
          this.transformRows = 10
      }
    },
    // 重置位置
    resetPosition() {
      this.titleRows = 6,
        this.contentRows = 13,
        this.transformRows = 13
    },
  }
}
</script>

<style scoped>
.dialog-header {
  display: inline-block;
  width: 180px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #409eff;
  color: #fff;
}

.custom-header {
  display: flex;
  justify-content: flex-start;
  /* 保持靠左对齐 */
  align-items: center;
  /* 垂直居中对齐 */
  padding: 0;
  /* 确保无内边距 */
  position: relative;
  /* 作为定位上下文 */
  height: 50px;
  /* 确保高度一致 */
}

.header-buttons {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  margin-left: auto;
  /* 推到右侧 */
}

.my-button {
  position: relative;
  /* 相对定位 */
  margin-right: 20px;
  /* 与关闭按钮保持 15px 间距 */
  margin-bottom: 6px;
  color: #9ea0a6;
  /* 保持原有颜色 */
  padding: 0;
  /* 移除默认内边距 */
}

:deep(.el-dialog__headerbtn) {
  position: absolute;
  top: 50%;
  right: 20px;
  /* 关闭按钮默认右边距 */
  transform: translateY(-50%);
  /* 垂直居中 */
  z-index: 1;
}

/* 去除最大化和最小化外边的边框 */
.el-button:focus-visible {
  outline: none;
}

.el-icon:hover {
  color: #409eff !important;
}
</style>